<template>
	<view class="product">
		<view class="pic">
			<view class="biao_05">
				商品图片
			</view>
			<view class="plr10" style="display: flex;flex-wrap: wrap;">
				<view class="mt10 flex mr10" style="position: relative;" v-if="thumb!=''">
					<image :src="thumb" v-if="thumb.indexOf('http') != -1" mode=""
						style="width: 180rpx;height: 180rpx;"></image>
					<image :src="'https://fucaiji.yiyunvip.top'+thumb" v-else mode=""
						style="width: 180rpx;height: 180rpx;"></image>
					<!-- <image src="@/static/img_del.png" mode="" @click.stop="deletelogo(index)"
						style="width: 36rpx;height: 36rpx;position: absolute;top:6rpx;right: 6rpx;"></image> -->

				</view>
				<view class="upload-box" @click="uploadLogo()"></view>
			</view>
		</view>
		<view class="pic">
			<view class="biao_05">
				商品幻灯图
			</view>
			<view class="plr10" style="display: flex;flex-wrap: wrap;">
				<view class="mt10 flex mr10" v-for="(item,index) in lunboimgPath" v-if="lunboimgPath!=''"
					@click="previewImage()" style="position: relative;">
					<image :src="item" v-if="item.indexOf('http') != -1" mode="" style="width: 180rpx;height: 180rpx;">
					</image>
					<image :src="'https://fucaiji.yiyunvip.top'+item" v-else mode=""
						style="width: 180rpx;height: 180rpx;"></image>
					<image src="@/static/img/shop/img_del.png" mode="" @click.stop="deleteimg(index)"
						style="width: 36rpx;height: 36rpx;position: absolute;top:6rpx;right: 6rpx;"></image>
				</view>
				<view class="upload-box" @click="uploadimg()"></view>
			</view>
		</view>
		<view class="cu-form-group margin-top">
			<view class="title kuan">商品名称：</view>
			<input placeholder="请输入" v-model="name"></input>
		</view>
		<view class="cu-form-group margin-top" @click="showtype=true">
			<view class="title kuan">商品分类：</view>
			<input placeholder="请选择" v-model="type" disabled></input>
		</view>
		<w-picker :visible.sync="showtype" mode="linkage" :options="options" :level="2" default-type="id"
			:default-props="defaultProps1" @confirm="onConfirm($event,'linkage')" @cancel="onCancel" ref="linkage">
		</w-picker>
		<view class="guige">
			<view class="cu-form-group ">
				<view class="title kuan">原价：</view>
				<input placeholder="请输入" v-model="yjiage"></input>
			</view>
			<view class="cu-form-group ">
				<view class="title kuan">会员价：</view>
				<input placeholder="请输入" v-model="jiage"></input>
			</view>
			<view class="cu-form-group ">
				<view class="title kuan">成本价：</view>
				<input placeholder="请输入" v-model="jiage_chengben"></input>
			</view>

		</view>
		<view>
			<view class="guige" v-for="(item,index) of pro_num" :key="index">
				<view class="cu-form-group ">
					<view class="title kuan">规格项：</view>
					<input placeholder="请输入" v-model="sku[index].guige"></input>
				</view>
				<view class="cu-form-group ">
					<view class="title kuan">名称：</view>
					<input placeholder="请输入" v-model="sku[index].guige1"></input>
				</view>
				<view class="cu-form-group ">
					<view class="title kuan">价格：</view>
					<input placeholder="请输入" v-model="sku[index].guige2"></input>
				</view>
				<view class="cu-form-group ">
					<view class="title kuan">库存：</view>
					<input placeholder="请输入" v-model="sku[index].guige3"></input>
				</view>
				<view class="stop" @click="close(index)"><img src="@/static/img/shop/stop.png" /></view>
			</view>
			<view class="cu-form-group " @click="tjge()">
				<view class="title flex alcenter">
					<u-icon name="plus-circle-fill" size="34" color="#EB702D"></u-icon>
					<view class="ml5">添加商品规格</view>
				</view>
			</view>
			<!-- <view class="cu-form-group " v-if="guige == 1">
				<view class="title kuan">规格名称：</view>
				<input placeholder="请输入" v-model="guigename"></input>
			</view> -->
		</view>
		<!-- <view class="cu-form-group margin-top ">
			<view class="title kuan">总库存：</view>
			<input placeholder="请输入" v-model="stock"></input>
		</view> -->
		<view class="cu-form-group margin-top ">
			<view class="title kuan">库存：</view>
			<input placeholder="请输入" v-model="kucun"></input>
		</view>
		<view class="cu-form-group margin-top ">
			<view class="title kuan">总销量：</view>
			<input placeholder="请输入" v-model="xiaoliang"></input>
		</view>
		<view class="cu-form-group1">
			<view class="title kuan mb10">商品详情介绍：</view>
			<view class='wrapper'>
				<view class='toolbar' @tap="format" style="height: 80px;overflow-y: auto;">
					<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold">
					</view>
					<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic">
					</view>
					<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
						data-name="underline"></view>
					<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"
						data-name="strike"></view>
					<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
						data-name="align" data-value="left"></view>
					<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi"
						data-name="align" data-value="center"></view>
					<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
						data-name="align" data-value="right"></view>
					<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi"
						data-name="align" data-value="justify"></view>
					<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color"
						data-name="color" :data-value="buttonColor" @tap="showPickerColorPop"
						:style="{color:buttonColor}"></view>
					<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
						data-name="list" data-value="ordered"></view>
					<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
						data-name="list" data-value="bullet"></view>
					<view class="iconfont icon-undo" @tap="undo"></view>
					<view class="iconfont icon-redo" @tap="redo"></view>

					<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
					<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
					<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
					<view class="iconfont icon-charutupian" @tap="insertImage"></view>
					<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1"
						data-name="header" :data-value="1"></view>
					<view class="iconfont icon-shanchu" @tap="clear"></view>
					<view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl"
						data-name="direction" data-value="rtl"></view>

				</view>
				<picker-color :isShow="showPickerColor" :bottom="bottomPickerColor" @callback='getPickerColor'>
				</picker-color>
				<view class="editor-wrapper">
					<editor id="editor" class="ql-container" placeholder="开始输入..." showImgSize showImgToolbar
						showImgResize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady">
					</editor>
				</view>
			</view>
			<!-- <textarea maxlength="-1" :disabled="modalName!=null" placeholder="请输入" v-model="goods.content"></textarea> -->
		</view>
		<view style="height: 150rpx;"></view>
		<view class="p_btn">
			<view class="flex flex-direction" v-if="!is_edit">
				<button @click="sub()" class="cu-btn bg-blue margin-tb-sm lg" style="background: #EB702D;">提交新增</button>
			</view>
			<view class="flex flex-direction" v-else>
				<button @click="sub_edit()" class="cu-btn bg-blue margin-tb-sm lg" style="background: #EB702D;">提交修改</button>
			</view>
		</view>
	</view>
</template>

<script>
	import urlsa from '@/siteinfo';
	import pickerColor from "@/components/helang-pickerColor/helang-pickerColor.vue"
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components: {
			"picker-color": pickerColor,
			wPicker
		},
		data() {
			return {
				lunboimgPath: [],
				sku: [],
				id: 0,
				is_edit: false,
				thumb: "",
				name: "",
				jiage: "",
				yjiage: "",
				content: "",
				id: "",
				jiage_chengben: "",
				guige: 0,
				guigename: "",
				xiaoliang: "",
				pro_num: [],
				readOnly: false,
				formats: {},
				showPickerColor: false,
				buttonColor: '',
				kucun: '',
				showtype: false,
				options: [],
				defaultProps1: {
					label: "name",
					value: "id",
					children: "children"
				},
				defaultRegion1: [],
				type: '',
				cate_id: 0
			};
		},

		computed: {

		},

		onLoad(options) {
			uni.loadFontFace({
				family: 'Pacifico',
				source: 'url("https://sungd.github.io/Pacifico.ttf")'
			})
			var that = this
			that.global.request.post({
				data: {
					do: 'cate',
					op: 'getGoodsCate'
				},
				success: res => {
					that.options = res.reverse()
				}
			})
			if (options.id > 0) {
				that.id = options.id
				that.is_edit = true
				uni.setNavigationBarTitle({
					title: '编辑商品'
				})
				that.global.request.post({
					data: {
						do: 'goods',
						op: 'getGoods',
						id: that.id
					},
					success: res => {
						if (that.$u.test.jsonString(res.shopjson)) {
							res.shopjson = JSON.parse(res.shopjson)
							that.pro_num = res.shopjson.length
							that.sku = res.shopjson
						}
						if (res.thumbimages != '') {
							that.lunboimgPath = res.thumbimages.split(',')
						}
						that.name = res.name
						that.yjiage = res.price
						that.jiage = res.vprice
						that.content = res.content
						that.thumb = res.thumbimage
						that.xiaoliang = res.num
						that.kucun = res.kucun
						that.type = res.catename
						that.cate_id = res.cate_id
						// that.guigename = res.guigename
						// that.guige = res.guige;
						that.jiage_chengben = res.cprice
						// that.editorCtx.setContents({
						// 	html: res.content
						// });

					}
				})
			}
		},
		onShow() {

		},
		methods: {
			onConfirm(res) {
				if(res.value[1]==''){
					this.type = res.result.split('-')[0]
					this.cate_id = res.value[0]
				}else{
					this.type = res.result.split('-')[1]
					this.cate_id = res.value[1]
				}
				
			},
			onCancel() {

			},
			confirm(e) {
				console.log(e);
			},
			//规格出现
			tjge() {
				this.guige = 1;
				this.pro_num++;
				this.sku.push({
					guige: '',
					guige1: '',
					guige2: '',
					guige3: ''
				})
				console.log(this.pro_num)
			},
			deletelogo() {
				this.thumb = ""
				this.showphoto = false
			},
			//上传LOGO
			uploadLogo() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: res => {
						var token = uni.getStorageSync("token");
						/* 	*/
						uni.uploadFile({
							header: {
								'token': token,
								/* 							"Content-Type": 'application/x-www-form-urlencoded', // 默认值
															'X-TOKEN-PETMALL': '', */
							},
							url: urlsa.siteroot + '/api/Common/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								this.thumb = JSON.parse(uploadFileRes.data).data.fullurl

							},
						});
					},
				});

			},
			//规格消失
			close(index) {
				this.pro_num--
				this.sku.splice(index, 1)
				if (this.sku.length == 0 || this.pro_num.length == 0) {
					this.sku = []
					this.pro_num = []
				}
			},
			uploadimg() {
				uni.chooseImage({
					count: 6,
					sizeType: ['original', 'compressed'],
					success: res => {
						var token = uni.getStorageSync("token");
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								header: {
									'token': token,
								},
								url: urlsa.siteroot + '/api/Common/upload', //仅为示例，非真实的接口地址
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									this.lunboimgPath.push(JSON.parse(uploadFileRes.data).data
										.fullurl)
								}
							});
						}

					}
				});
			},
			deleteimg(index) {
				var that = this;
				uni.showModal({
					content: '确认删除该图片吗？',
					success: function(res) {
						if (res.confirm) {
							that.lunboimgPath.splice(index, 1);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			previewImage() {
				uni.previewImage({
					urls: this.lunboimgPath,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {},
						fail: function(err) {}
					}
				});
			},
			sub() {
				var that = this
				this.editorCtx.getContents({
					success(res) {
						var obj = {};
						obj.htm = res.html;
						obj.text = res.text;
						obj.IsContent = that.IsContent;
						that.content = obj.htm;
						console.log(res)
						console.log(that.content);

						if (!that.thumb) {
							return that.$u.toast('请上传商品图')
						}
						if (that.lunboimgPath.length == 0) {
							return that.$u.toast('请上传幻灯图')
						}
						if (!that.name) {
							return that.$u.toast('请输入商品名称')
						}
						if (that.cate_id == 0) {
							return that.$u.toast('请选择商品分类')
						}
						if (!that.yjiage) {
							return that.$u.toast('请输入原价')
						}
						if (!that.jiage) {
							return that.$u.toast('请输入价格')
						}
						if (!that.jiage_chengben) {
							return that.$u.toast('请输入成本价')
						}
						if (!that.xiaoliang) {
							return that.$u.toast('请输入销量')
						}
						if (!that.content) {
							return that.$u.toast('请输入商品详情介绍')
						}
						that.global.request.post({
							data: {
								do: 'goods',
								op: 'addGoods',
								thumbimages: that.lunboimgPath.join(","),
								thumbimage: that.thumb,
								name: that.name,
								// id: that.id,
								shangjia_id: uni.getStorageSync("s_id"),
								vprice: that.jiage,
								price: that.yjiage,
								cprice: that.jiage_chengben,
								content: that.content,
								shopjson: JSON.stringify(that.sku),
								// guigename: that.guigename,
								// guige: that.guige,
								num: that.xiaoliang,
								kucun: that.kucun,
								cate_id: that.cate_id
							},
							success: res => {
								uni.showToast({
									title: res.message,
									icon: 'none',
									duration: 4000
								})
								if (res == 1) {
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										})
									}, 1500);
								}

							}
						})
					}
				});


			},
			sub_edit() {
				var that = this
				this.editorCtx.getContents({
					success(res) {
						var obj = {};
						obj.htm = res.html;
						obj.text = res.text;
						obj.IsContent = that.IsContent;
						that.content = obj.htm;
						console.log(res)
						console.log(that.content);

						if (!that.thumb) {
							return that.$u.toast('请上传商品图')
						}
						if (that.lunboimgPath.length == 0) {
							return that.$u.toast('请上传幻灯图')
						}
						if (!that.name) {
							return that.$u.toast('请输入商品名称')
						}
						if (that.cate_id == 0) {
							return that.$u.toast('请选择商品分类')
						}
						if (!that.yjiage) {
							return that.$u.toast('请输入原价')
						}
						if (!that.jiage) {
							return that.$u.toast('请输入价格')
						}
						if (!that.jiage_chengben) {
							return that.$u.toast('请输入成本价')
						}
						if (!that.xiaoliang) {
							return that.$u.toast('请输入销量')
						}
						if (!that.content) {
							return that.$u.toast('请输入商品详情介绍')
						}
						that.global.request.post({
							data: {
								do: 'goods',
								op: 'editGoods',
								thumbimages: that.lunboimgPath.join(","),
								thumbimage: that.thumb,
								name: that.name,
								id: that.id,
								shangjia_id: uni.getStorageSync("s_id"),
								vprice: that.jiage,
								price: that.yjiage,
								cprice: that.jiage_chengben,
								content: that.content,
								shopjson: JSON.stringify(that.sku),
								// guigename: that.guigename,
								// guige: that.guige,
								num: that.xiaoliang,
								kucun: that.kucun,
								cate_id: that.cate_id
							},
							success: res => {
								uni.showToast({
									title: res.message,
									icon: 'none',
									duration: 4000
								})
								if (res == 1) {
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										})
									}, 1500);
								}

							}
						})
					}
				});
			},
			readOnlyChange() {
				this.readOnly = !this.readOnly
			},
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
			},
			undo() {
				this.editorCtx.undo()
			},
			redo() {
				this.editorCtx.redo()
			},
			format(e) {
				let {
					name,
					value
				} = e.target.dataset
				if (!name) return
				// console.log('format', name, value)
				this.editorCtx.format(name, value)

			},
			onStatusChange(e) {
				const formats = e.detail
				this.formats = formats
			},
			insertDivider() {
				this.editorCtx.insertDivider({
					success: function() {
						console.log('insert divider success')
					}
				})
			},
			clear() {
				this.editorCtx.clear({
					success: function(res) {
						console.log("clear success")
					}
				})
			},
			removeFormat() {
				this.editorCtx.removeFormat()
			},
			insertDate() {
				const date = new Date()
				const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
				this.editorCtx.insertText({
					text: formatDate
				})
			},
			insertImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.editorCtx.insertImage({
							src: res.tempFilePaths[0],
							alt: '图像',
							success: function() {
								console.log('insert image success')
							}
						})
					}
				})
			},
			/* 显示获取颜色选择弹窗 */
			showPickerColorPop() {
				this.showPickerColor = true;
			},
			/* 获取颜色选择回调 */
			getPickerColor(color) {
				/* 隐藏弹窗 */
				this.showPickerColor = false;
				/* 判断颜色值是否有效 */
				if (color) {
					this.buttonColor = color;
					this.format({
						target: {
							dataset: {
								name: "color",
								value: color
							}
						}
					})
				}
			},
		}
	}
</script>

<style lang="less">
	.wrapper {
		height: 100%;
	}

	.editor-wrapper {
		height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px);
		background: #fff;
	}

	.iconfont {
		display: inline-block;
		padding: 8px 8px;
		// width: 24px;
		// height: 24px;
		cursor: pointer;
		font-size: 20px;
	}

	.toolbar {
		box-sizing: border-box;
		border-bottom: 0;
		font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	}


	.ql-container {
		box-sizing: border-box;
		padding: 12px 15px;
		width: 100%;
		min-height: 30vh;
		height: 100%;
		font-size: 16px;
		line-height: 1.5;
	}

	.ql-active {
		color: #06c;
	}

	.pic {
		padding: 20upx 10upx;
		background-color: #fff;
	}

	.H50 {
		height: 80px;
	}

	.kuan {
		width: 35%;
	}

	.input-view {
		font-size: 28upx;
	}


	.product {
		background-color: #F7F6FB;
		height: 100%;

		.head {
			position: relative;
			padding: 0 5px;
		}

		.head img {
			width: 100%;
			height: 150px;
		}

		.btn {
			position: absolute;
			top: 10px;
			right: 5px;
		}

		.btn button {
			font-size: 10px;
			color: red;
			border: none;
			border-radius: 20px;
			background-color: #CBCBCB;
			padding: 5px;
		}

		.top {
			box-shadow: 0 0 8px 5px #EDEDED;
			height: 1px;
			background-color: #EDEDED;
		}

		.pro_tit {
			padding: 15px 10px 10px;
			border-bottom: 1px solid #EDEDED;
		}

		.BH {
			height: 5px;
			background-color: #F2F2F2;
		}

		.biao {
			background-color: #fff;
			margin: 10px;
			border-radius: 5px;
			border: 1px solid #EAEAEA;
		}

		.biao span {
			color: red;
			padding-right: 5px;
		}

		.biao textarea {
			width: 100%;
			border-bottom: 1px solid #EDEDED;
			padding: 10px;
			height: 100px;
		}

		.biao_01 {
			padding: 10px 10px 10px;
			border-bottom: 1px solid #EDEDED;
			display: flex;
		}

		.biao_01_l {
			padding-top: 7px;
			flex-shrink: 0;
		}

		.biao_01_1 {
			padding-top: 5px;
		}

		.biao_01_r {
			flex-grow: 1;
		}

		.biao_01_r text {
			padding-right: 10px;
		}

		.biao_02_r select {
			padding: 0 10px;
			line-height: 25px;
			min-width: 80px;
			text-align: center;
		}

		.biao_01_m {
			border-right: 1px solid #EDEDED;
		}

		.biao_02 {
			padding: 13px 10px 10px;
			border-bottom: 1px solid #EDEDED;
			display: flex;
			justify-content: space-between;
		}

		.biao_03 {
			padding: 13px 10px 10px;
			border-bottom: 1px solid #EDEDED;
			display: flex;
		}

		.biao_04 {
			display: flex;
			padding: 10px 10px 10px;
			border-bottom: 1px solid #EDEDED;
		}

		.biao_04_l {
			display: flex;
			width: 50%;
			line-height: 30px;
			padding-right: 10px;
		}

		.biao_04_l_i {
			flex-shrink: 1;
		}

		.biao_04_l_1 {
			flex-shrink: 0;
		}

		.biao_05 {
			padding: 10px 10px 0;
			font-size: 16px;
		}

		.jgkc {
			padding: 15px 10px;
			border-bottom: 1px solid #EDEDED;
		}

		.p_btn {
			background: #F7F6FB;
			padding: 0 30rpx;
			position: fixed;
			bottom: 0;
			width: 100%;
			z-index: 99;
		}

		.pro_btn {
			background-color: #E5E5E5;
			padding: 10px;
			text-align: center;
			border-radius: 20px;
			background-color: #DF421D;
			color: #fff;
			width: 100%;
		}

		.guige {
			border: 1px solid #EDEDED;
			margin: 20rpx;
			position: relative;
		}

		.stop {
			position: absolute;
			right: -15px;
			top: 60px;
		}

		.stop img {
			width: 30px;
			height: 30px;
		}

		.uni-input-input,
		.uni-input {
			height: 30px;
			line-height: 30px;
		}
	}

	.cu-form-group {
		background-color: #ffffff;
		padding: 1upx 30upx;
		display: flex;
		align-items: center;
		min-height: 100upx;
		justify-content: space-between;
	}

	.cu-form-group1 {
		background-color: #ffffff;
		padding: 1upx 30upx;
		min-height: 100upx;

		textarea {
			width: 100%;
		}
	}


	.title {
		text-align: justify;
		padding-right: 30upx;
		font-size: 30upx;
		position: relative;
		height: 60upx;
		line-height: 60upx;
	}

	.cu-form-group input {
		flex: 1;
		font-size: 30upx;
		color: #555;
		padding-right: 20upx;
	}

	.cu-form-group>text[class*="cuIcon-"] {
		font-size: 36upx;
		padding: 0;
		box-sizing: border-box;
	}

	.cu-form-group textarea {
		margin: 32upx 0 30upx;
		height: 4.6em;
		width: 100%;
		line-height: 1.2em;
		flex: 1;
		font-size: 28upx;
		padding: 0;
	}

	.cu-form-group.align-start .title {
		height: 1em;
		margin-top: 32upx;
		line-height: 1em;
	}

	.cu-form-group picker {
		flex: 1;
		padding-right: 40upx;
		overflow: hidden;
		position: relative;
	}

	.cu-form-group picker .picker {
		line-height: 100upx;
		font-size: 28upx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		width: 100%;
		text-align: right;
	}

	.cu-form-group picker::after {
		font-family: cuIcon;
		display: block;
		content: "\e6a3";
		position: absolute;
		font-size: 34upx;
		color: #8799a3;
		line-height: 100upx;
		width: 60upx;
		text-align: center;
		top: 0;
		bottom: 0;
		right: -20upx;
		margin: auto;
	}

	.cu-form-group textarea[disabled],
	.cu-form-group textarea[disabled] .placeholder {
		color: transparent;
	}

	button {
		background-color: #EB702D;
		color: white;
		position: fixed;
		bottom: 0;
		margin-bottom: 20rpx;
	}

	.border-bottom {
		border-bottom: 1px solid #EDEDED;
	}

	.upload-box {
		margin-top: 20rpx;
		width: 180rpx;
		height: 180rpx;
		border: 1px solid #d9d9d9;
		position: relative;
	}

	.upload-box::before {
		width: 2px;
		height: 39.5px;
	}

	.upload-box::after {
		width: 39.5px;
		height: 2px;
	}

	.upload-box::before,
	.upload-box::after {
		content: " ";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #d9d9d9;
	}
</style>
